import React from 'react';
import { Row, Col, Cascader, Button, DatePicker, Timeline } from 'antd';
import { dateFormat } from '../../utils/util';
import moment from 'moment';
import './index.less';
const { RangePicker } = DatePicker;
let id = '';

export default class History extends React.Component {
    render() {
        id = this.props.id;
        return (
            <div className="warp_">
                <HistoryForm queryHistory={this.props.queryHistory}/>
                <div style={{marginTop: '10px'}}>
                {
                    this.props.historyList.length > 0 ?
                    <Timeline>
                        {
                            this.props.historyList.map(item => 
                                <Timeline.Item color="red" key={item.fId}>
                                    <p>服务类型：{item.fContentName}</p>
                                    <p>服务人员：{item.fServiceName}</p>
                                    <p>服务时间：{dateFormat(item.fBeginnTime)} ~ {dateFormat(item.fEndTime)}</p>
                                </Timeline.Item>
                            )
                        }
                    </Timeline>
                    : <p style={{textAlign: 'center',marginTop: '30%'}}>暂无数据</p>
                }
                </div>
            </div>
        )
    }
} 

class HistoryForm extends React.Component {
    timeDesc = [];
    dateChange = (value) => {
        this.timeDesc = value;
    }
    query = () => {
        let param = {
            fBeginnTime: this.timeDesc.length > 0 ? this.timeDesc[0] : null,
            fEndTime: this.timeDesc.length > 0 ? this.timeDesc[1] : null, 
            fId: id,
        };
        this.props.queryHistory(param);
    }
    disabledDate = (current) => {
        return current > moment().endOf('day');
    }
    render() {
        return(
            <Row gutter={16}>
                <Col span={20}>
                <RangePicker  disabledDate={this.disabledDate} onChange={this.dateChange} style={{width:'100%'}}/>
                </Col>
                <Col span={4}>
                <Button type="primary" onClick={this.query}> 查询 </Button>
                </Col>
            </Row>
        )
    }
}